<template>
  <div class="login-container">
    <a-form
      :model="formState"
      name="normal_login"
      class="login-form"
      layout="vertical"
    >
      <div class="welcome-box"><h3>欢迎登录 mini music</h3></div>
      <a-form-item
        label="账号"
        name="username"
        :rules="[{ required: true, message: '请输入账号!' }]"
      >
        <a-input v-model:value="formState.username">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
      >
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <!--      <a-form-item>-->
      <!--        <a-form-item name="remember" no-style>-->
      <!--          <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>-->
      <!--        </a-form-item>-->
      <!--        <a class="login-form-forgot" href="">Forgot password</a>-->
      <!--      </a-form-item>-->

      <a-form-item>
        <a-button
          :disabled="disabled"
          type="primary"
          html-type="submit"
          style="width: 100%; margin-bottom: 5px"
          @click="submit"
        >
          登录
        </a-button>

        <a href="">没有账号? 去注册</a>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { login } from "@/api/api.ts";
import { useRouter } from "vue-router";
const router = useRouter();
import useStore from "@/pinia/index.ts";
const { user } = useStore();
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: true,
});
let submitLoading = ref<boolean>(false);
const submit = () => {
  let submitData = {
    username: formState.username,
    password: formState.password,
  };
  submitLoading.value = true;
  login(submitData)
    .then((result) => {
      if (result.code === 200) {
        router.push("/");
        user.setUserInfo(result.data.user);
        user.setUserToken(result.data.token);

        if (result.data?.user?.theme) {
          user.setThemeColor(result.data.user.theme);
        }
      } else {
        message.error(result.msg);
      }
    })
    .finally(() => {
      submitLoading.value = false;
    });
};

const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: url("@/assets/image/login/background-color.png") no-repeat 0 0/100%
    100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 450px;
    height: 350px;
    padding: 20px;
    border-radius: 5px;
    margin: 0 auto;
    background-color: #fff;
    .welcome-box {
      width: 100%;
      padding: 0 0 10px;
      text-align: center;
    }
  }
}
</style>
